import React from 'react'
import * as echarts from 'echarts'
import { image } from "../../public/word-cloud"
import { Progress, Select } from 'antd'
import '../../public/echarts-wordcloud.min.js'
import Axios from 'axios'
import { set } from '../tools'

const data = [{name:'成都', id:'090200'}, {name:'广州', id:'030200'}]
const { Option } = Select

let chinachart

export default class Cloud extends React.Component {
    constructor(props) {
        super(props)

        this.set = set.bind(this)

        this.state = {
        data: {},
        selectID: '090200'
        }
    }

    async componentDidMount() {
        const { data } = this.state
        const data1 = await this.fetchData()
        console.log(233,data1)
        this.renderCloud(data1)
    }

    async fetchData() {
        // if(!status) {
        //     throw new Error('请求失败')
        // }
        const { selectID } = this.state
        return new Promise(async (resolve, reject) => {
            const URL = 'http://localhost:3456/'
            const { status, data } = await Axios.post(URL, { id: selectID })
            await this.set({
                data: data
            })
            console.log('123', data)
            resolve(data)    
        })
    }

    renderCloud(data) {
        const maskImage = new Image()
        maskImage.src = image
        if(!chinachart) {
            chinachart = echarts.init(document.getElementById('ChinaChartMain'))
        }
        console.log(chinachart)
        maskImage.onload = () => {
            chinachart.setOption( {
                backgroundColor:'#fff',
                tooltip: {
                    show: false
                },
                series: [{
                    type: 'wordCloud',
                    gridSize: 1,
                    sizeRange: [12, 55],
                    rotationRange: [-45, 0, 45, 90],
                    maskImage: maskImage,
                    textStyle: {
                        normal: {
                            color: function() {
                                return 'rgb(' +
                                        Math.round(Math.random() * 255) +
                                        ', ' + Math.round(Math.random() * 255) +
                                        ', ' + Math.round(Math.random() * 255) + ')'
                            }
                        }
                    },
                    left: 'center',
                    top: 'center',
                    // width: '96%',
                    // height: '100%',
                    right: null,
                    bottom: null,
                    // width: 300,
                    // height: 200,
                    // top: 20,
                    data: data
                }]
            })
        }
    }

    async handleChange(value) {
         const { id } = data.find(item => item.name === value)
         await this.set({ selectID:id })
         await this.fetchData()
         chinachart.clear()
         await this.renderCloud(
             
         )
      }

    render() {
        return (
            <div className="chartMain">
                <Select
                 defaultValue="成都" style={{ width: 220 }} 
                 onChange={this.handleChange.bind(this)}
                >
                    {
                        data.map(item => {
                            return (
                                <Option key={item.id} value={item.name}>{item.name}</Option>
                            )
                        })
                    }
                </Select>
                <div id="ChinaChartMain" style={{width:'100%', height:'800px'}}></div>
                <div className="describe">关键字词云</div>
            </div>
        )
    }
}